<template>
  <div class="app-container">
    <h2 style="text-align: center" v-text="this.$route.name"></h2>
    <el-steps :active="active" finish-status="success" align-center style="margin-bottom: 40px">
      <el-step title="填写课程基本信息"></el-step>
      <el-step title="创建课程大纲"></el-step>
      <el-step title="最终发布"></el-step>
    </el-steps>
    <div>
      <!--内容显示区域-->
      <info v-if="active===0" :global-course-info="courseInfo" @next="next" @courseInfo="saveCourseInfo"/>
      <chapter :global-course-id="courseInfo.id" v-if="active===1" @next="next" @prve="prve"/>
      <publish v-if="active===2" :global-course="courseInfo"  @prve="prve"/>
    </div>

  </div>
</template>

<script>
    import Info from "./info";
    import Chapter from "./chapter";
    import Publish from "./publish";
    import http from "@/api/course"

    export default {
        name: "save",
        components: {Publish, Chapter, Info},
        data() {
            return {
                active: 0,
                courseInfo:{
                    id:null
                },
            }
        },
        methods: {
            prve(){
                this.active--
            },
            next() {
                this.active++
            },
            saveCourseInfo(courseInfo){
                this.courseInfo = courseInfo
            },
            getCourse(id){
                http.getOne(id).then(res=>{
                    if (res.data){
                        this.courseInfo = res.data
                    }
                })
            }
        },
        created() {
            if (this.$route.params&&this.$route.params.id){
                this.getCourse(this.$route.params.id)
            }
        },
        watch:{
            $route(val,oldVal){
                this.courseInfo={
                    id:null
                }
            }
        }
    }
</script>

<style scoped>

</style>
